<template>
  <mEcharts :options="state.options" :height="state.height" :width="state.width" />
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import * as echarts from 'echarts'

const props = defineProps({
  // 图表数据项
  chartData: {
    type: Object,
    default: () => ({})
  }
})
// [
//         '一月份',
//         '二月份',
//         '三月份',
//         '四月份',
//         '五月份',
//         '六月份',
//         '七月份',
//         '八月份',
//         '九月份',
//         '十月份',
//         '十一月份',
//         '十二月份'
//       ]
const { chartData } = props
const chartRef = ref()
const state = reactive({
  height: '360px',
  width: '100%',
  options: {
    tooltip: {
      show: true,
      trigger: 'item',
      axisPointer: {
        type: 'shadow',
        label: {
          show: true,
          backgroundColor: '#7B7DDC'
        }
      }
    },
    legend: {
      show: true
    },
    grid: {
      x: '8%',
      width: '88%',
      top: '5%',
      bottom: '7%'
    },
    xAxis: {
      data: chartData.category,
      axisLine: {
        lineStyle: {
          color: '#B4B4B4'
        }
      },
      axisTick: {
        show: false
      }
    },
    yAxis: [
      {
        splitLine: { show: false },
        axisLine: {
          lineStyle: {
            color: '#B4B4B4'
          }
        },

        axisLabel: {
          formatter: '{value} '
        }
      },
      {
        splitLine: { show: false },
        axisLine: {
          lineStyle: {
            color: '#B4B4B4'
          }
        },
        axisLabel: {
          formatter: '{value} '
        }
      }
    ],
    series: [
      // {
      //   name: '合格率',
      //   type: 'line',
      //   smooth: true,
      //   showAllSymbol: true,
      //   symbol: 'emptyCircle',
      //   symbolSize: 8,
      //   yAxisIndex: 1,
      //   itemStyle: {
      //     normal: {
      //       color: '#ffdb5c'
      //     }
      //   },
      //   data: chartData.rateData
      // }
      {
        // name: '不达标',
        type: 'bar',
        barWidth: 14,
        itemStyle: {
          normal: {
            //  barBorderRadius: 5 ,
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: '#e7bcf3' },
              { offset: 1, color: '#3EACE5' }
            ])
          }
        },
        data: chartData.barData
      }
      // {
      //     name: "计划销售",
      //     type: "bar",
      //     barGap: "-100%",
      //     barWidth: 10,
      //     itemStyle: {
      //         normal: {
      //             barBorderRadius: 5,
      //             color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
      //                 { offset: 0, color: "rgba(50,197,233,0.8)" },
      //                 { offset: 0.2, color: "rgba(50,197,233,0.5)" },
      //                 { offset: 1, color: "rgba(50,197,233,0.2)" }
      //             ])
      //         }
      //     },
      //     z: -12,
      //     data: chartData.lineData
      // }
    ]
  }
})
</script>

<style scoped></style>
